<template>
<view>
<view :class="'navbar ' + parameter.class" :style="'height:' + navH + 'rpx'">
   <view class="navbarH" :style="'height:' + navH + 'rpx;'">
      <view class="navbarCon acea-row row-center-wrapper" v-if="parameter.navbar==0">
         <view class="search acea-row row-middle" @tap="setGoodsSearch"><text class="iconfont icon-xiazai5"></text>搜索商品</view>
         <view class="logo"><image :src="logoUrl"></image></view>
      </view>
      <view class="navbarCon acea-row row-center-wrapper" v-if="parameter.navbar==1">
         <view :class="'name ' + (parameter.color==true?'on':'') + ' line1'">{{parameter.title}}</view>
         <view :class="'iconfont icon-xiangzuo ' + (parameter.color==true?'on':'')" v-if="parameter.return==1" @tap="returnFun"></view>
      </view>
   </view>
</view>
<view :style="'height:' + navH + 'rpx'"></view>
</view>
</template>

<script>
var app = getApp();

export default {
  data() {
    return {
      navH: ""
    };
  },

  components: {},
  props: {
    parameter: {
      type: Object,
      default: () => {}
    },
    logoUrl: {
      type: String,
      default: ''
    }
  },
  mounted: function () {
    this.setClass();
    var pages = getCurrentPages();
    if (pages.length <= 1) this.setData({
      'parameter.return': 0
    });
  },
  beforeMount: function () {
    this.setData({
      navH: app.globalData.navHeight
    });
  },
  methods: {
    returnFun: function () {
      uni.navigateBack();
    },
    setGoodsSearch: function () {
      uni.navigateTo({
        url: '/pages/goods_search/index'
      });
    },
    setClass: function () {
      var color = '';

      switch (this.parameter.class) {
        case "0":
        case 'on':
          color = 'on';
          break;

        case '1':
        case 'black':
          color = 'black';
          break;

        case '2':
        case 'gray':
          color = 'gray';
          break;

        case '3':
        case "red":
          color = 'red';
          break;

        case '4':
        case "gradual01":
          color = 'gradual01';
          break;

        default:
          break;
      }

      this.setData({
        'parameter.class': color
      });
    }
  }
};
</script>
<style>

.navbar{position:fixed;background-color:#fff;top:0;/*  #ifdef  H5  */top:calc(88rpx + constant(safe-area-inset-top));top:calc(88rpx + env(safe-area-inset-top));/*  #endif  */left:0;z-index:999;width:100%;}
.navbar.on{background-color:#e93323;}
.navbar.black{background-color:#232323;}
.navbar.gray{background-color:#666;}
.navbar.red{background-color:#eb5447;}
.navbar.gradual01{background-image: linear-gradient(to right,#f67837 0%,#f11d09 100%);}
.navbar .navbarH{position:relative;}
.navbar .navbarH .navbarCon{position:absolute;bottom:0;height:100rpx;width:100%;}
.navbar .navbarH .navbarCon .name{color:#000;font-size:36rpx;font-weight:bold;width: 300rpx;text-align: center;}
.navbar .navbarH .navbarCon .name.on{color:#fff;}
.navbar .navbarH .navbarCon .icon-xiangzuo{color:#000;font-weight:bold;position:absolute;font-size:40rpx;left:16rpx;width:100rpx;height:56rpx;line-height:54rpx;top:50%;transform:translateY(-50%);}
.navbar .navbarH .navbarCon .icon-xiangzuo.on{color:#fff;}
.navbar .navbarH .navbarCon .logo{width:127rpx;height:45rpx;position:absolute;left:30rpx;top:50%;transform:translateY(-50%);}
.navbar .navbarH .navbarCon .logo image{width:100%;height:100%;display:block;}
.navbar .navbarH .navbarCon .search{width:360rpx;height:64rpx;background-color:#f7f7f7;border-radius:50rpx;padding:0 28rpx;box-sizing:border-box;font-size:28rpx;color:#bbb;margin-right:26rpx;}
.navbar .navbarH .navbarCon .search .icon-xiazai5{font-size:34rpx;margin-right:16rpx;}
</style>